<template>
  <div class="app-container">
    <div>
      <!-- 条件栏 -->
      <div class="filter-wrapper">
        <new-page-filter
          v-model:query="filterInfo.query"
          :query-more-json="false"
          :filter-list="filterInfo.searchList"
          :filter-btn="filterInfo.searchBtn"
          :clear-type="filterInfo.clearType"
        >
          <template v-slot:filter-fiscalPeriodName>
            <el-input
              v-model="filterInfo.query.fiscalPeriodName"
              class="not-mongolia"
              type="input"
              :required="true"
              :disabled="true"
              :placeholder="'请选择会计期间'"
            >
              <template #append>
                <el-icon @click="checkFinance"><MoreFilled /></el-icon>
              </template>
            </el-input>
          </template>
        </new-page-filter>
      </div>
      <div class="filter-wrapper">
        <new-page-filter :filter-btn="filterInfo.btnList"></new-page-filter>
      </div>
      <!-- 表格 -->
      <table-container
        :refresh="tableInfo.refresh"
        :init-curpage="tableInfo.initCurpage"
        v-model:data="tableInfo.data"
        :tab-index="true"
        :check-box="false"
        :query="filterInfo.query"
        :field-list="tableInfo.fieldList"
        :api="tableInfo.api"
        @pageInfo="pageInfo"
      >
      </table-container>
    </div>
    <SelectFiscalPeriod
      v-if="selectFiscalInfo.visible"
      v-model:show-dialog="selectFiscalInfo.visible"
      :query="selectFiscalInfo.query"
      :save-empty="true"
      :check-box="false"
      :highlight-row="true"
      @callback="callBackselectFinanceType"
    />
    <page-dialog
      v-show="dialogInfo.visible"
      :title="dialogInfo.title"
      v-model:visible="dialogInfo.visible"
      :width="dialogInfo.width"
      :bt-loading="dialogInfo.btLoading"
      :bt-list="dialogInfo.btList"
    >
      <div class="asset-msg">
        <div class="asset-msg-label">
          <i class="el-icon-warning"></i>{{ dialogInfo.msg }}：
        </div>
        <el-radio-group v-model="dialogInfo.flag">
          <el-radio :label="true">当前页数据</el-radio>
          <el-radio :label="false">全部页数据</el-radio>
        </el-radio-group>
      </div>
    </page-dialog>
  </div>
</template>

<script setup name="floorStoreExportSummary">
import { fatchTemplateByCode } from '@/api/base'
import {
  selectFloorStoreExportSummary,
  excelFloorStoreExportSummary,
  printFloorStoreExportSummary,
} from '@/api/dataQuery.js'

const { proxy } = getCurrentInstance()
const filterInfo = ref({
  clearType: true,
  query: {},
  searchList: [
    {
      label: '会计期间',
      value: 'fiscalPeriodName',
      slot: true,
      show: true,
    },
  ],
  searchBtn: [{ type: 'button', label: '搜索', event: search }],
  btnList: [
    {
      type: 'button',
      label: '打印',
      event: print,
      show: proxy.$permission('floorStoreExportSummary:printDetail'),
    },
    {
      type: 'button',
      label: '导出excel',
      event: exportExcel,
      show: proxy.$permission('floorStoreExportSummary:excelDetail'),
    },
  ],
})
const selectFiscalInfo = ref({
  visible: false,
  query: { fiscalType: 1 },
})
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  api: null,
  fieldList: [
    { label: '会计期间', value: 'fiscalPeriodName' },
    {
      label: '期初金额',
      value: 'beforeAmount',
      type: 'column',
      formatter: proxy.$fn.TripartiteMethod,
    },
    {
      label: '出库金额',
      value: 'exportAmount',
      type: 'column',
      formatter: proxy.$fn.TripartiteMethod,
    },
    {
      label: '入库金额',
      value: 'storeAmount',
      type: 'column',
      formatter: proxy.$fn.TripartiteMethod,
    },
    {
      label: '期末金额',
      value: 'endAmount',
      type: 'column',
      formatter: proxy.$fn.TripartiteMethod,
    },
  ],
})

const page = ref({
  page: true,
  curPage: 1, // 当前页
  pageSize: 20, // 每页条数
})
const dialogInfo = ref({
  visible: false,
  title: '提示',
  btLoading: false,
  type: '',
  msg: '',
  width: '400px',
  flag: true,
  btList: [
    { label: '关闭', event: handleClose, show: true },
    {
      label: '打印',
      type: 'primary',
      event: checkConfirm,
      show: true,
    },
  ],
})

onMounted(() => {
  getList()
})
function checkFinance() {
  selectFiscalInfo.value.visible = true
}
function callBackselectFinanceType(data) {
  if (data && data.id) {
    filterInfo.value.query.fiscalPeriodName = data.name
  } else {
    filterInfo.value.query.fiscalPeriodName = ''
  }
}

function getList() {
  tableInfo.value.api = selectFloorStoreExportSummary
  tableInfo.value.refresh = Math.random()
}
function search() {
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}
function pageInfo(obj) {
  page.value = obj
}
// 关闭弹窗前的回调
function handleClose() {
  dialogInfo.value.visible = false
}
function checkConfirm() {
  if (dialogInfo.value.type === 'excel') {
    exportExcelList()
  } else if (dialogInfo.value.type === 'print') {
    printList()
  }
  dialogInfo.value.visible = false
  dialogInfo.value.msg = ''
}
function exportExcel() {
  dialogInfo.value.visible = true
  dialogInfo.value.type = 'excel'
  dialogInfo.value.msg = '请选择数据导出范围'
  dialogInfo.value.btList[1].label = '导出'
  dialogInfo.value.flag = true
}
function exportExcelList() {
  let params = {
    ...filterInfo.value.query,
    ...page.value,
    page: dialogInfo.value.flag,
  }
  excelFloorStoreExportSummary(params).then((resp) => {
    if (resp) {
      proxy.$fn.parseExcel(resp)
    }
  })
}
async function print() {
  dialogInfo.value.visible = true
  dialogInfo.value.type = 'print'
  dialogInfo.value.msg = '请选择当数据打印范围'
  dialogInfo.value.btList[1].label = '打印'
  dialogInfo.value.flag = true
}
function printList() {
  fatchTemplateByCode({
    resourceCode: 'floorStoreExportSummary:printDetail',
    isDefault: 1,
  }).then((res) => {
    if (res && res.success) {
      let temp = proxy.$fn.getPrintTemp(res.data[0])
      getPrintData(temp, dialogInfo.value.flag)
    }
  })
}
function getPrintData(temp, flag) {
  let params = {
    ...filterInfo.value.query,
    ...page.value,
    page: flag,
  }
  printFloorStoreExportSummary(params).then((res) => {
    if (res.success && res) {
      let data = proxy.$fn.deepClone(res.data)
      let newData = data.map((item) => {
        return {
          ...item,
          ...item.orderInfo,
        }
      })
      proxy.$lodop.preview(temp, newData)
    }
  })
}
</script>

<style scoped></style>
